<template>
  <div>
    <div class="mainapp">
      <div style="margin: 0 20px">
        <div class="header">
          <div class="headercontent">
            <el-steps :active="active" align-center finish-status="success">
              <el-step  title="选择表单"></el-step>
              <el-step  title="执行上报"></el-step>
              <el-step  title="上报完成"></el-step>
            </el-steps>
          </div>
        </div>

        <stepOne @dataList="dataList" @lihne="lihne" :active="active" v-if="active==0"></stepOne>
        <step-two :zip="zip" :list="list" :lihne="this.lihne" :total="total" :user="user" v-if="active==1"></step-two>
        <step-third :zip="zip" :fileList="fileList"  v-if="active==2"></step-third>
        <div class="line"></div>
          <div class="btnBottom">
            <el-button v-if="active!=0 && active!=2" style="margin-top: 12px;" @click="prpe">上一步</el-button>
            <el-button v-if="active!=2" style="margin-top: 18px;" @click="next">下一步</el-button>
            <el-button  v-if="active==2" @click="over()" class="btn" type="primary" round>完成</el-button>
          </div>


      </div>
    </div>
  </div>
</template>

<script>
  import stepOne from "./stepOne";
  import StepThird from "./stepThird";
  import StepTwo from "./stepTwo";
  import {getstepTreatingList,getstepUploadList} from "@/api/escalation";
    export default {
        name: "index",
        components:{
            StepTwo,
            StepThird,
            stepOne,
        },
        data() {
            return {
                active: 0,
                list:[],
                queryParams:{
                     type:'',
                     date:'',
                },
                lihne:{},
                zip:'',
                total:0,
                user:'',
                StepThird:[],
                fileList:[],

            };
        },
        mounted(){

        },
        methods: {
            next() {
                if(this.active==0){
                    if(this.list.length>0){
                        this.active++;
                        this.getTreatingNext()
                    }else{
                        this.$message({
                            showClose: true,
                            message: '请查询结果'
                        });
                    }
                }else if(this.active==1){
                     this.getstepUploadList();
                     this.active++
                }

            },
            prpe(){
                this.active=0;
                if(this.active==0){
                    this.list=[];
                }

            },
            dataList(list,item,total,user){
                this.list = list;
                this.lihne = item;
                this.total=total;
                this.user = user;
                console.log(list,item,'list')
            },
            getTreatingNext(){
                this.queryParams.type = this.lihne.test;
                this.queryParams.date = this.lihne.month;
                getstepTreatingList(this.queryParams).then((res) => {
                     this.zip = res.ZIP_NAME;
                     console.log(this.zip)
                });
            },
            getstepUploadList(){
                this.query={
                    uploadTheme:this.user,
                    fileName:this.zip,
                }
                getstepUploadList(this.query).then((res)=>{
                    console.log(res);
                    this.fileList = res;
                })
            },
            over(){
                console.log(111111)
                this.$router.push({ path: "/reporthome/reportsystem" });
            }
        }
    }
</script>

<style scoped lang="scss">
 .header{
   display: flex;
   &Title{
     width:10%;
     position: absolute;
     left:2%;
   }
   &content{
     width: 100%;
     margin: 20px 358px;
   }
 }
  /*.btnBottom{*/
  /*   position: absolute;*/
  /*   bottom:40px;*/
  /*   right:300px;*/
  /*   top:87px*/
  /* }*/
 .btnBottom{
   position: absolute;
   left:50%;
   margin-left:-42px ;
   bottom:28px;
 }
 ::v-deep .el-step__main{
   position: absolute;
   top:-7px;
   left:30px;
 }
 ::v-deep .el-step.is-center .el-step__line{
   left:42%;
   right:12%;
   /*background: #fff;*/
 }
 ::v-deep .el-step.is-center .el-step__head{
   text-align: left;
 }
  .line{
    width: 97.6%;
    height: 1px;
    background: #E6EBF5;
    position: absolute;
    bottom: 70px;
  }
 .mainapp{
   height: calc(100vh - 84px);
   background: #F7F9FB;
 }
</style>

